<template>
  <div class="home">
    <van-search class="search" placeholder="请输入搜索关键词" v-model="value" />
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item class="nav" v-for="item in banners" :key="item.id">
        <img
          class="s-img"
          :src="item.link || item.coverImage | dalImg"
          :alt="item.name"
        />
      </van-swipe-item>
    </van-swipe>
    <!-- <van-grid>
      <van-grid-item icon="good-job-o" text="新品推荐" color="#1989fa" />
      <van-grid-item icon="description" text="必买清单" />
      <van-grid-item icon="fire-o" text="热销榜" />
      <van-grid-item icon="coupon-o" text="全部" />
    </van-grid> -->
    <!-- grid商品列表 -->
    <van-grid class="gridList" :column-num="4" icon-size="50px" gutter="5px">
      <van-grid-item
        v-for="item in category"
        :key="item.id"
        :icon="item.coverImage | dalImg"
        :text="item.name"
        @click="toList"
        :to="{ name: 'List', query: { id: item.id } }"
      />
    </van-grid>
    <template>
      <img
        class="ad"
        style="width: 100%"
        src="https://img2.baidu.com/it/u=1766723163,409334348&fm=253&fmt=auto&app=138&f=JPEG?w=1920&h=500"
        alt=""
      />
    </template>
    <template>
      <div class="bag">
        <div class="left">
          <img
            style="width: 120px; height: 80px"
            src="https://h2.appsimg.com/a.appsimg.com/upload/brand/upcb/2022/06/09/143/ias_4e049f8c18287ee2ef01d3c8b9a556a6_1135x545_85.jpg"
            alt=""
          />
          <p>箱包专场</p>
        </div>
        <div class="right">
          <van-grid :column-num="3" icon-size="45px" center>
            <van-grid-item
              @click="detail(item.id)"
              v-for="item in bagList"
              :key="item.id"
              :icon="item.coverImage | dalImg"
              :text="item.price.toFixed(2)"
            />
          </van-grid>
        </div>
      </div>
    </template>
    <template>
      <img
        class="ad"
        style="width: 100%"
        src="https://img1.baidu.com/it/u=2446758931,521647700&fm=253&fmt=auto&app=138&f=JPEG?w=499&h=156"
        alt=""
      />
    </template>
    <template>
      <div class="bag">
        <div class="left">
          <img
            style="width: 120px; height: 80px"
            src="https://h2.appsimg.com/a.appsimg.com/upload/brand/upcb/2022/06/01/2/ias_966db7a180dc932858b23d796a869e13_1135x545_85.jpg"
            alt=""
          />
          <p>美妆专场</p>
        </div>
        <div class="right">
          <van-grid :column-num="3" icon-size="45px" center>
            <van-grid-item
              @click="detail(item.id)"
              v-for="item in bagList"
              :key="item.id"
              :icon="item.coverImage | dalImg"
              :text="item.price.toFixed(2)"
            />
          </van-grid>
        </div>
      </div>
    </template>
    <template>
      <div class="title">
        <template>
          <h3 class="word">热卖商品</h3>
        </template>
      </div>
      <van-grid :column-num="2" center icon-size="150px">
        <van-grid-item
          @click="detail(item.id)"
          v-for="item in searchProduct"
          :key="item.id"
          :icon="item.coverImage | dalImg"
          :text="item.name"
        />
        <template>
          <button
            @click="loadMore"
            class="btn"
            v-show="pages == page ? false : true"
          >
            加载更多
          </button>
        </template>
      </van-grid>
    </template>
  </div>
</template>

<script>
// @ is an alias to /src
import { bannerAPI } from "../services/banners";
import { loadDataAPI } from "../services/products";
import { loadCategoryAPI } from "@/services/products";
export default {
  data() {
    return {
      page: 1,
      pages: 1,
      value: "",
      banners: [],
      bagList: [],
      list: [],
      category: [],
    };
  },
  async created() {
    const res = await bannerAPI();
    const bagRes = await loadDataAPI();
    this.banners = res.data;
    this.bagList = bagRes.data;
    this.bagList = bagRes.data.slice(0, 6);
    this.loadMore();

    // 获取商品分类
    const resCategory = await loadCategoryAPI();
    // console.log(resCategory);
    this.category = resCategory.data;
  },
  methods: {
    async loadMore() {
      const res = await loadDataAPI(this.page);
      this.list.push(...res.data);
      this.pages = res.pages;
      this.page += 1;
      // .then((res) => {
      //   this.list.push(...res.data);
      //   this.page += 1;
      // });
    },
    detail(id) {
      this.$router.push({
        name: "Detail",
        query: {
          id,
        },
      });
    },
    toList() {},
  },
  // name: "HomeView",
  computed: {
    searchProduct() {
      return this.list.filter((item) => item.name.indexOf(this.value) > -1);
    },
  },
};
</script>
<style scoped>
.s-img {
  width: 100%;
}
.nav {
  margin: 10px 0;
}
.title {
  height: 50px;
  width: 100%;
  font-size: 14px;
  background-color: white;
  line-height: 50px;
}
.title h3 {
  text-indent: 20px;
}
.ad {
  margin: 10px 0;
}
.bag {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  height: 200px;
  width: 100%;
  overflow: hidden;
}
.left {
  height: 100%;
  background-color: white;
  text-align: center;
  padding-top: 60px;
  padding-left: 10px;
  box-sizing: border-box;
}
.left p {
  margin: 0;
}
.right {
  height: 100%;
}
.word {
  text-align: center;
}
.btn {
  height: 35px;
  width: 100%;
  border: none;
  background-color: rgb(243, 195, 108);
  color: #fff;
  border-radius: 10px;
  margin: 0;
}
/* 商品列表 */
.gridList {
  cursor: pointer;
}
.search {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
}
.my-swipe {
  margin-top: 54px;
}
</style>
